<template>
  <view class="">
    <!-- 顶部导航 -->
    <!-- 		<fa-navbar title="登录"></fa-navbar>
 -->
    <view class="login">
      <view style="display: flex;">
        <view class="login-type" :class="active?'active':''" @click="active = true">手机验证码登录</view>
        <view class="login-type" :class="!active?'active':''" style="text-align: left;" @click="active = false">账号密码登录</view>
      </view>
      <view class="u-m-t-50">
        <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
          <u-form-item :label-position="labelPosition" label="false" prop="mobile" label-width="120">
            <u-input :border="border" placeholder="请输入手机号码" v-model="form.mobile" type="number"></u-input>
          </u-form-item>
          <u-form-item v-if="active" :label-position="labelPosition" label="false" prop="captcha" label-width="120">
            <u-input :border="border" placeholder="请输入验证码" v-model="form.captcha" type="text"></u-input>
            <u-button hover-class="none" type="primary" slot="right" :custom-style="{ backgroundColor: getCodebgColor, color: getCodeColor }" size="mini" @click="getCode">
              {{ codeTips }}
            </u-button>
          </u-form-item>
          <u-form-item v-if="!active" :label-position="labelPosition" label="false" prop="password" label-width="120">
            <u-input :password-icon="true" :border="border" type="password" v-model="form.password" placeholder="请输入密码"></u-input>
          </u-form-item>
        </u-form>
      </view>
      <view class="u-m-t-80">
        <u-button hover-class="none" type="primary" :custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" shape="circle" @click="goLogin">
          登录
        </u-button>
      </view>
      <view class="u-flex u-row-right u-tips-color u-m-t-30 ">
        <view style="flex: 1;color:#DE2415 ;" @click="goPage('/pages/login/forgetpwd')">忘记密码</view>
        <view style="flex: 1;text-align: right;" @click="goPage('/pages/login/register')">注册账号</view>
      </view>
      <view class="u-text-center other">
        <u-grid :col="1" :border="false">
          <u-grid-item>
            <u-icon name="weixin-circle-fill" color="#53c240" :size="100" @click="goPage('/pages/login/wxlogin')"></u-icon>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
  </view>
</template>

<script>
import { loginfunc } from '@/common/fa.mixin.js';
export default {
  mixins: [loginfunc],
  onLoad() {
    // #ifdef MP-WEIXIN || APP-PLUS
    this.isThreeLogin = true;
    // #endif

    // #ifdef H5
    if (this.$util.isWeiXinBrowser()) {
      this.isThreeLogin = true;
    }
    // #endif
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  data() {
    return {
      active: true,
      getCodebgColor: "transparent",
      getCodeColor: "rgb(222, 36, 21)",
      labelPosition: 'left',
      border: false,
      errorType: ['message'],
      form: {
        mobile: '',
        captcha: '',
        password: ''
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号码',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur']
          }
        ],
        captcha: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change'
          }
        ]
      },
      isThreeLogin: false,
      codeTips: ''
    };
  },
  methods: {
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode: async function() {
      if (!this.$u.test.mobile(this.form.mobile)) {
        this.$u.toast('手机号码格式不正确！');
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        let res = await this.$api.getSmsSend({
          mobile: this.form.mobile,
          event: 'mobilelogin'
        });
        this.$u.toast(res.msg);
        if (res.code == 1) {
          this.$refs.uCode.start();
        }
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    goPage(url) {
      console.log(url);
      this.$u.route(url);
    },
    goThreeLogin: async function() {
      // #ifdef MP-WEIXIN
      this.$u.route('/pages/login/wxlogin');
      // #endif

      // #ifdef H5
      this.goAuth();
      // #endif

      // #ifdef APP-PLUS
      this.goAppLogin();
      // #endif
    },
    goLogin: function() {
      let that = this;
      this.$refs.uForm.validate(async valid => {
        if (valid) {
          if (this.vuex_invite_id) {
            this.form.invite_id = this.vuex_invite_id;
          }
          if (this.active) {
            let res = await this.$api.mobilelogin(this.form);
            if (!res.code) {
              this.$u.toast(res.msg);
              return;
            }
            this.$u.toast(res.msg);

            this.$u.vuex('vuex_token', res.data.token);
            this.$u.vuex('vuex_user', res.data.user || {});
            setTimeout(function() {
              that.success(1);
            }, 500);
          } else {
            this.form.account = this.form.mobile;
            let res = await this.$api.goLogin(this.form);
            if (!res.code) {
              this.$u.toast(res.msg);
              return;
            }
            this.$u.toast(res.msg);
            setTimeout(function() { }, 1000);
            this.$u.vuex('vuex_token', res.data.token);
            this.$u.vuex('vuex_user', res.data.user || {});
            setTimeout(function() {
              that.success(1);
            }, 500);
          }

        } else {
          this.$u.toast('验证失败');
        }
      });
    }
  }
};
</script>

<style>
/deep/ .u-form-item__message {
  margin-top: 35px !important;
}
.u-form-item {
  background: #f5f5f5;
  border-radius: 80rpx;
  padding: 5rpx 30rpx !important;
  margin-bottom: 40rpx;
}
page {
  background-color: #ffffff;
}
.login {
  padding: 80rpx 100rpx 0 100rpx;
}
.other {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 40rpx;
}
.login-type {
  flex: 1;
  display: flex;
  align-items: center;
}
.active {
  background-image: url(../../static/image/loginBg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 20px;
  padding: 5px 6px;
  font-size: 32rpx;
  font-family: Source Han Sans CN;
}
</style>
